{% extends "single_demo.html" %}

{% block demo-header %}tv.ui.TabContainer{% endblock %}

{% block demo-content %}

<style type="text/css">
.demo-tab-bar {
  height: 46px;
  text-align: center;
  white-space: nowrap;
  width: 500px;
}
.demo-tab {
  display: inline-block;
  line-height: 46px;
  text-align: center;
  width: 100px;
  vertical-align: bottom;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}
.demo-tab.tv-container-selected-child {
  background-color: #4c6ea7;
  font-weight: bold;
}
.demo-tab-content-container {
  background: #4c6ea7;
  height: 200px;
  position: relative;
  width: 500px;
  -webkit-border-radius: 5px;
}
.tab-demo-content {
  opacity: 0;
  padding: 20px;
  position: absolute;
}
.tab-demo-content.tv-container-selected-child {
  opacity: 1;
}
</style>
<script type="text/javascript">
</script>

<p>Tab containers are great for building menus and other tabbed content.</p>
<p>Code structure:</p>
<pre>
&lt;div class="tv-tab-container tv-container-vertical"&gt;
  &lt;div class="tv-tab-container-bar tv-container-horizontal"&gt;
    // Tab bar components.
  &lt;/div&gt;
  &lt;div class="tv-tab-container-content tv-container-horizontal"&gt;
    // Content components.
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<div class="tv-tab-container tv-container-vertical">
  <div class="tv-tab-container-bar tv-container-horizontal demo-tab-bar">
    <div class="demo-tab tv-component">tab 1</div><div class="demo-tab tv-component">tab 2</div><div class="demo-tab tv-component">tab 3</div><div class="demo-tab tv-component">tab 4</div>
  </div>
  <div class="tv-tab-container-content tv-tab-container-focus-attractor tv-container-horizontal demo-tab-content-container">
    <div class="tab-demo-content tv-component">content 1</div>
    <div class="tab-demo-content tv-component">content 2</div>
    <div class="tab-demo-content tv-component">content 3</div>
    <div class="tab-demo-content tv-component">content 4</div>
  </div>
</div>
{% endblock %}
